<template>
    <p>基本指令</p>
    <p>a:{{ a }}</p>
    <div v-html="spanHtml"></div>

    <p>v-bind</p>
    <img src="http://www.baidu.com/img/baidu_sylogo1.gif">
    <img v-bind:src="imgUrl" alt="">
    <img :src="imgUrl" alt="">

    <button v-on:click="btnAction">v-on</button>
    <button @click="btnAction">v-on-@</button>



    <p>v-if</p>
    <p v-if="random <0.5">0.5</p>
    <p v-else-if="random<0.8">0.8</p>
    <p v-else>大于0.8</p>

    <button @click="getRandom">产生随机数</button>
    <p>{{ random }}</p>
    <p v-show="random<0.5"></p>


    <p>v-for</p>
    <ul>
        <li v-for="(item,index) in todosArr">index:{{ index }}  -item:{{ item }}</li>
    </ul>
<ul>
    <li v-for="(value,key,index) in todosObj">{{ key }} -{{ value }} - {{ index }}</li>
</ul>
</template>

<script setup>
import {ref} from 'vue'

const a =ref(0)

const spanHtml = ref('<span>test</span>')
const imgUrl = 'http://www.baidu.com/img/baidu_sylogo1.gif'
const random = ref(0)


const todosArr = ref([
    '起床',
    '打扫卫生',
    '看电视',
    '吃饭',
    '睡觉',
])

const todosObj = ref({
'8':'汽车',
'9':'起床',
'10':'看电视',
'11':'吃饭',
'12':'睡觉',
})
const btnAction =()=>{
    alert(1)
}
const getRandom=()=>{
    random.value = Math.random();
}
</script>